<!--
 * @Author: your name
 * @Date: 2021-07-20 14:21:01
 * @LastEditTime: 2021-09-28 17:13:43
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \usp-osm-frondend\src\views\serviceCenter\equityMgmt\details.vue
-->
<template>
  <div
    class="white-content"
    v-loading="pageLoading"
    element-loading-text="loading"
  >
    <div class="newPageTitle">
      <span class="backIcon" @click="goBack"><i class="el-icon-back"></i></span>
      <h1 style="display: inline-block; margin-left: 10px; font-weight: bold">
        服务权益详情
      </h1>
    </div>
    <div class="detail-content-section">
      <h2>
        <span>会员ID：{{ datas.customerId }}</span>
        <span style="float: right">冻结状态：
          {{ getDictionaryNameByCode('FROZENSTATE', datas.frozenState) }}
        </span>
      </h2>
      <el-form label-width="110px" label-position="left">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="会员名称：">
              <span>
                {{datas.customerName}}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="会员手机号：">
              <span>
                {{datas.customerPhone}}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="VIN：">
              {{ datas.vin }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="服务包名称：">
              {{ datas.servicePackageName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服务包编号：">
              {{ datas.servicePackageCode }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="有效期：">
              {{ datas.beginUsePeriod | timestampToChange() }}至{{ datas.endUsePeriod | timestampToChange() }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="服务绑定时间：">
              {{ datas.serviceBindTime | timestampToChange('time') }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
        <v-table
        ref="multipleTable"
        :data="responseOrderDispatchItemsVoList"
        v-on:pageSizeChange="pageSizeChange"
        v-on:currentPageChange="currentPageChange"
        :paginationTotal="total"
        border
        pagination
        >
          <el-table-column
            label="服务名称"
            align="center"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.serviceName }}
            </template>
          </el-table-column>
          <el-table-column
            label="服务类型"
            align="center"
            min-width="100"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ getDictionaryNameByCode('SERVICETYPE', scope.row.serviceType)  }}
            </template>
          </el-table-column>
          <el-table-column
            label="服务编号"
            align="center"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.serviceCode }}
            </template>
          </el-table-column>
          <el-table-column
            label="服务商名称"
            align="center"
            min-width="140"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.serviceProviderName }}
            </template>
          </el-table-column>
          <el-table-column
            label="数量"
            align="center"
            min-width="60"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.quantity === null ? '∞' : scope.row.quantity }}
            </template>
          </el-table-column>
          <el-table-column
            label="已锁数量"
            align="center"
            min-width="140"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.lockedQuantity }}
            </template>
          </el-table-column>
          <el-table-column
            label="已使用数量"
            align="center"
            min-width="140"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.usedQuantity }}
            </template>
          </el-table-column>
          <el-table-column
            label="最后一次使用时间"
            align="center"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.lastUsedTime | timestampToChange('time') }}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            min-width="80"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span class="colorLink" @click="getUsagePreview(scope.row)">
                <el-tooltip class="item" effect="dark" content="使用详情" placement="top-start">
                  <i class="el-icon-document"></i>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
        </v-table>
    </div>
    <usage-dialog ref="usageDialog"></usage-dialog>
  </div>
</template>

<script>
import { getEquityDetail } from '@/api/service'
import { common } from '@/mixins/common'
import { mapGetters } from 'vuex'
import UsageDialog from './dialog/usageDialog'
import { setRouterParams, getRouterParams } from '@/utils/auth'
import VTable from '@/components/PageTable/index'
export default {
  name: 'equityDetails',
  components: { VTable, UsageDialog },
  data () {
    return {
      datas: {},
      displayLength: 10,
      displayStart: 0,
      total: 0,
      responseOrderDispatchItemsVoList: [],
      tableData: [],
      pageLoading: false,
      id: ''
    }
  },
  mixins: [common],
  computed: {
    ...mapGetters(['lookupItems'])
  },
  mounted () {
    this.id = this.$route.params.id
    if (this.id) {
      this.datas = this.id
      setRouterParams(this.$route)
      this.getDeveryDetailById()
    } else {
      const routeParams = getRouterParams(this.$route)
      this.id = routeParams.id
      this.datas = this.id
      this.getDeveryDetailById()
    }
  },
  methods: {
    getUsagePreview (row) {
      // if (!this.$auth('orderManagement:consignmentNote:checkLogisticsInformation')) {
      //   this.$alert('您没有权限')
      //   return false
      // }
      this.$refs.usageDialog.open(row)
    },
    goBack () {
      this.$router.go(-1)
    },
    getDeveryDetailById () {
      this.pageLoading = true
      const params = {
        customerServiceId: this.id.id,
        displayLength: this.displayLength,
        displayStart: this.displayStart
      }
      getEquityDetail(params)
        .then((res) => {
          if (res) {
            if (Number(res.code) === 1) {
              this.responseOrderDispatchItemsVoList = res.obj.data
              this.total = res.obj.total
            } else {
              // this.$alert('获取发货单详情失败', {
              //   callback: (action) => {
              //     this.goBack()
              //   }
              // })
            }
            this.pageLoading = false
          }
        })
        .catch(() => {
          this.pageLoading = false
          this.$alert('获取发货单详情失败')
        })
    },
    masterDetails (id) {
      if (!this.$auth('orderManagement:mainOrder:detail')) {
        this.$alert('您没有权限')
        return false
      }
      this.$router.push({ name: 'masterOrderDetails', params: { id: id } })
    },
    subDetails (id) {
      if (!this.$auth('orderManagement:subOrder:detail')) {
        this.$alert('您没有权限')
        return false
      }
      this.$router.push({ name: 'suborderDetails', params: { id: id } })
    },
    pageSizeChange (size) {
      this.displayLength = size
      this.getDeveryDetailById()
    },
    currentPageChange (curPage) {
      this.displayStart = curPage - 1
      this.getDeveryDetailById()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.footer {
  width: 100%;
  margin: 0;
}
.detail-section {
  h2 {
    margin: 15px 0;
    font-weight: bold;
  }
}
/deep/ .el-form-item {
  margin-bottom: 0;
}
</style>
